<template>
  <div class="app-container flex dirc">
    <!-- 基础信息 -->
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>合同信息</span>
          <!-- 待签约 -->
          <template v-if="formData && formData.status == ContractStatus.WAIT_SIGN">
            <el-button size="small" class="ml10" @click="handleEditBase">修改信息</el-button>
            <el-button type="primary" size="small" class="ml10" @click="handlePreview">
              合同签约
            </el-button>
          </template>
          <!-- 已签约 -->
          <el-button v-if="formData && formData.status != ContractStatus.WAIT_SIGN" size="small" class="ml10"
            type="primary" @click="handleDownload">
            合同下载
          </el-button>
        </div>
      </template>
      <el-descriptions v-if="formData">
        <el-descriptions-item label="合同名称">{{ formData.name }}</el-descriptions-item>
        <el-descriptions-item label="关联客户">
          {{ formData.customerName }}
        </el-descriptions-item>
        <el-descriptions-item label="甲方">{{ formData.partyA }}</el-descriptions-item>
        <el-descriptions-item label="乙方">{{ formData.partyB }}</el-descriptions-item>
        <el-descriptions-item label="起始日期">{{ formData.startTime }}</el-descriptions-item>
        <el-descriptions-item label="截至日期">{{ formData.startTime }}</el-descriptions-item>
        <el-descriptions-item label="总金额">{{ `￥${formData.amount}` }}</el-descriptions-item>
        <el-descriptions-item label="房屋">{{ `${formData.houseName}` }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ `${Contract_Status_Label[formData.status]}` }}
        </el-descriptions-item>
        <el-descriptions-item label="套餐">{{ `${formData.saleMealName}` }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="flex1 mt10 full" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>材料清单</span>
          <el-button v-if="formData && formData.status == ContractStatus.WAIT_SIGN" size="small" class="ml10"
            @click="handleEditMaterial">
            修改材料
          </el-button>
        </div>
      </template>
      <el-table ref="dataTableRef" v-loading="loading" :data="formData.items" height="100%" highlight-current-row
        v-if="formData">
        <el-table-column label="材料名称" prop="name" />
        <el-table-column label="材料类型" width="120">
          <template #default="scope">
            {{ SaleMealTypeLabel[scope.row.itemType] }}
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="spec" />
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="数量" prop="quantity" />
        <el-table-column label="单价" align="right" prop="price">
          <template #default="scope">
            {{ `￥${scope.row.price}` }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹窗：预览&签订 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="70%" top="5vh" @close="closeDetailWindow">
      <Preview v-if="dialog.mode === 'preview'" :id="id" />
      <SignQrCode v-if="dialog.mode === 'sign'" :id="id" />
      <template #footer>
        <el-button v-if="dialog.mode === 'preview'" type="primary" @click="showDetailWindow('sign')">
          确认，继续签约
        </el-button>
        <el-button v-if="dialog.mode === 'preview'" @click="handleEditContract()">
          修改合同
        </el-button>
        <el-button v-if="dialog.mode === 'sign'" type="primary" @click="handleSignComplete">
          完成签约
        </el-button>
        <el-button @click="closeDetailWindow">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import ContractAPI, {
  ContractDetailVO,
  ContractStatus,
  Contract_Status_Label,
} from "@/api/flow/contract.api";
import { SaleMealTypeLabel } from "@/api/business/material/sealMeal.api";
import Preview from "./components/preview.vue";
import SignQrCode from "./components/signQr.vue";
import router from "@/router";

const route = useRoute();
const id = computed(() => route.query.id as string);
const loading = ref(false);
const formData = ref<ContractDetailVO>(); //合同信息

onMounted(() => {
  loadContractDetail();
});

const loadContractDetail = async () => {
  if (!id.value || id.value === "0") {
    return;
  }
  await ContractAPI.getDetail(id.value).then((data) => {
    formData.value = { ...data };
  });
};

// 编辑基础信息
function handleEditBase() {
  router.push({ path: "/contract/contractEdit", query: { id: id.value, step: 0 } });
}

// 编辑合同
function handleEditContract() {
  router.push({ path: "/contract/contractEdit", query: { id: id.value, step: 1 } });
}

// 编辑材料
function handleEditMaterial() {
  router.push({ path: "/contract/contractEdit", query: { id: id.value, step: 2 } });
}

// 合同签订-预览弹窗
function handlePreview() {
  showDetailWindow("preview");
}

// 合同签订-完成签约
function handleSignComplete() {
  closeDetailWindow();
  ElMessage.success("合同签订成功");
  loadContractDetail();
}

// 合同下载
async function handleDownload() {
  await ContractAPI.download(id.value);
}

/**
 * 预览&签订弹窗
 */
const dialog = reactive({
  title: "合同签约",
  visible: false,
  mode: "preview", //当前弹窗内容 preview-预览 sign-签订
});
function showDetailWindow(mode: string) {
  dialog.mode = mode;
  dialog.visible = true;
}
function closeDetailWindow() {
  dialog.visible = false;
}
</script>

<style lang="scss" scoped></style>
